import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, Image, FlatList, StatusBar, TextInput, ScrollView} from 'react-native';
import { base } from "../../../../assets/style";
import LinearGradient from "react-native-linear-gradient";
import Toast from "react-native-easy-toast";
import Loading from "../../../../components/loading";
import { API } from "../../../../api";
import { setCopy } from "../../../../utils/utils";
import QRCode from 'react-native-qrcode'
import {i18n} from "../../../../utils/locales/i18n";

type Props = {};
export default class MyAssets extends Component<Props> {
    static navigationOptions = {
        title: 'FCC' + i18n.t('recharge'),
        headerTintColor: '#0f0f0f',
        headerBackTitle: null
    };
    constructor() {
        super();
        this.state = {
            loading: true,
            address: ''
        }
    }
    componentDidMount(): void {
        this._initAddress()
    }

    _initAddress = async () => {
        const res = await API._fetch('getReceiptAddress', {
            token: 'fcc'
        })
        // code: 10000
        // data: "0xCD5e48461D4bCf87F0b717cbCBe8eae2606dc6A5"
        // msg: "获取收币地址成功"
        // status: 200
        this.setState({
            loading: false
        })
        if (res && res.data) {
            this.setState({
                address: res.data
            })
        }
    }
    // 确认充币
    submitRecharge = () => {
        this.setState({
            loading: true
        }, async () => {
            const reqData = {
                "rechargeToken": "fcc",
                "rechargeAddress": this.props.navigation.getParam('rechargeAddress'),
                "receiptAddress": this.state.address,
                "rechargeSum": this.props.navigation.getParam('rechargeAmount')
            }
            // console.log('reqData', reqData);
            const res = await API._fetch('submitRecharge', reqData)
            // console.log(res);
            this.setState({
                loading: false
            })
            if (res && res.code === 10000) {
                this.toRechargeSuccess(res.data)
            } else {
                this.refs.toast.show(res.msg || i18n.t('o_defeat'))
            }
        })
    }

    toRechargeSuccess = (params) => {
        this.props.navigation.navigate('RechargeSuccess', {orderData: JSON.stringify(params)})
    }
    doCopy = () => {
        setCopy(this.state.address)
        this.refs.toast.show(i18n.t('c_succ'))
    }
    render() {
        return (
            <View style={[base.flex_1, base.content_container]}>
                {/*toast*/}
                <Toast ref="toast" position='bottom' positionValue={200}/>
                { this.state.loading ? (
                    <Loading
                        info={this.state.currentToastInfo}
                    />) : null }
                <View style={[base.flex_col_center, { paddingVertical: 20 }]}>
                    { this.state.address ? (
                        <QRCode
                            value={this.state.address}
                            size={150}
                            bgColor='black'
                            fgColor='white'
                        />
                    ) : (
                        <Image source={require('../../../../images/mine/barcode.png')} style={{width: 150, height: 150, marginBottom: 10}}/>
                    ) }
                    <View style={{paddingVertical: 20}}>
                        <Text>{ i18n.t('get_add') }</Text>
                    </View>
                </View>
                <View style={{paddingTop: 10}}>
                    <Text>{ i18n.t('addr_b') }</Text>
                    <View style={{height: 60, marginTop: 10, backgroundColor: '#f2f2f2', paddingLeft: 15, justifyContent: 'center'}}>
                        <Text style={[base.color_gray]}>
                            { this.state.address ? this.state.address : '----' }
                        </Text>
                    </View>
                    <View style={[base.flex_row_end, { height: 50 }]}>
                        <TouchableOpacity onPress={() => this.doCopy()}>
                            <View style={[base.flex_row_center, {width: 75, height: 25, borderWidth: 1, borderRadius: 3, borderColor: '#ff7606'}]}>
                                <Text style={{color: '#ff7606'}}>{ i18n.t('copy') }</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
                {/*tips*/}
                <View style={[base.flex_1, { paddingTop: 10 }]}>
                    <ScrollView style={[base.flex_1]}>
                        <Text style={{ fontSize: 16, lineHeight: 20 }}>{ i18n.t('info') + '  ' }
                            <Text style={[base.color_gray, { fontSize: 16 }]}>
                                { i18n.t('info5') }
                            </Text>
                        </Text>
                    </ScrollView>
                </View>
                {/*button*/}
                <View style={[base.flex_row_center, {height: 150}]}>
                    <TouchableOpacity style={{width: '80%'}} onPress={this.submitRecharge}>
                        <LinearGradient
                            start={{x: 0, y: 0}}
                            end={{x: 1, y: 1}}
                            colors={['#feac1c', '#ff7506']}
                            style={{ width: '100%', height: 50, borderRadius: 25, justifyContent: 'center', alignItems: 'center' }}
                        >
                            <Text style={{color: '#fff'}}>{ i18n.t('submit') }</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
